<template>
	<view class="background">
		<!-- 主内容容器 -->
		<view class="content-wrapper">
			<view class="top-spacer">
				<view class="top-operate-bar">
					<view class="back-btn" @click="navigateBack">
						<u-icon name="arrow-left" size="28"></u-icon>
					</view>
					<view class="robot-entry" @click="toggleRobotChat">
						<image src="/static/moodRobot.png" mode="widthFix" class="robot-header-avatar"></image>
						<text class="robot-text">情感陪伴</text>
					</view>
				</view>
			</view>
			
			<!-- 核心内容区 -->
			<view class="content-center">
				<image class="logo" src="/static/moodLogo.png" mode="widthFix"></image>
				<view class="slogan">用声音，匹配此刻的你</view>
			</view>
			
			<!-- 按钮区域 -->
			<view class="button-container">
				<!-- 登录按钮：触发登录流程 -->
				<button 
					class="login-btn" 
					@click="startLogin"
				>
					微信一键登录
				</button>
			</view>
		</view>
		
		<!-- 暂不登录 -->
		<view class="skip-login" @click="skipLogin">暂不登录</view>
		
		<!-- 加载提示 -->
		<view class="loading-mask" v-if="isLoading">
			<view class="loading-dialog">
				<view class="loading-icon">
					<view class="spinner"></view>
				</view>
				<view class="loading-text">登录中...</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOpenId, weixinlogin } from '../../api/User';
	export default {
		data() {
			return {
				isLoading: false,
			}
		},
		methods: {
			// 跳过登录
			skipLogin() {
				uni.switchTab({
					url: '/pages/MoodSelect/moodSelect'
				});
			},
			
			navigateBack(){
				uni.switchTab({
					url: '/pages/MoodSelect/moodSelect'
				});
			},
			
			// 情感陪伴入口
			toggleRobotChat() {
				uni.showToast({ title: "情感陪伴功能待开发", icon: "none" });
			},
			
			// 开始登录流程
			async startLogin() {
				this.isLoading = true;
				try {
					// 1. 获取登录凭证code
					const loginRes = await uni.login({
						provider: 'weixin'
					});
					const code = loginRes.code; 
					if (!code) {
						throw new Error('获取登录凭证失败');
					}
					
					// 2. 用code换取sessionKey、token和openid
					const token = await this.getOpenidAndSessionKey(code);
					console.log(token)
					uni.setStorageSync('token', token); 
					console.log(uni.getStorageSync('token'))
					this.handleLoginSuccess();
					
				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败，请重试',
						icon: 'none',
						duration: 2000
					});
					this.isLoading = false;
				}
			},
			
			// 用code获取openid和sessionKey
			async getOpenidAndSessionKey(code) {
				const res = await getOpenId(code)
				console.log(res)
				if (res.code == 1) {
					throw new Error(res.message || '获取用户标识失败');
				}
				const result = await weixinlogin(res.data.openid);
				console.log("我的token",result.data.token)
				if (result.code == 1) {
					throw new Error(res.message || '获取用户标识失败');
				}
				return result.data.token;
			},
			
			// 登录成功处理
			handleLoginSuccess() {
				// 登录成功提示
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1500
				});

				// 跳转首页
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/myHome/myHome'
					});
				}, 1500);
			}
		}
	}
</script>

<style>
/* 样式部分保持不变 */
.background{
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #e6e6fa 0%, #f0f8ff 100%);
	padding: 0 20rpx;
	box-sizing: border-box;
	position: relative;
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	height: calc(100% - 80rpx);
}

.top-spacer {
	flex: 1;
}
	.top-operate-bar { position: absolute; top: 40rpx; left: 30rpx; right: 30rpx; z-index: 2; 
		display: flex; justify-content: space-between; align-items: center; }
	.robot-entry { display: flex; align-items: center; gap: 16rpx; 
		padding: 16rpx 28rpx; border-radius: 40rpx; backdrop-filter: blur(8rpx); }
	.robot-text { font-size: 28rpx; color: #fff; font-weight: 500; }
	.robot-header-avatar { width: 64rpx; height: 64rpx; border-radius: 50%; }
.content-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.logo {
	width: 240rpx;
	height: auto;
}

.slogan {
	font-size: 28rpx;
	color: #666699;
	margin-top: 10rpx;
}

.button-container {
	display: flex;
	justify-content: center;
	flex: 2;
	align-items: center;
	width: 100%;
}

.login-btn {
	border-radius: 28rpx;
	width: 90%;
	background-color: #007aff;
	color: white;
	padding: 12rpx 0;
	font-size: 28rpx;
	line-height: normal;
}

.skip-login {
	font-size: 24rpx;
	color: #666699;
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	touch-action: manipulation;
}

/* 加载样式 */
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.loading-dialog {
	background-color: white;
	padding: 30rpx;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 自定义加载动画 */
.spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid rgba(0, 122, 255, 0.2);
	border-radius: 50%;
	border-top-color: #007aff;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.loading-text {
	font-size: 28rpx;
	color: #333;
	margin-top: 20rpx;
}
</style>
